<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="500"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Parameters
        const cx = canvas.width / 2;
        const cy = canvas.height / 2;
        const R = 180; // Radius of the circle
        const phi_deg = 35; // Angle phi in degrees for visual representation
        const phi_rad = phi_deg * Math.PI / 180;

        // Colors and styles
        const circleColor = '#000000';
        const pointColor = '#505050';
        const vectorColor = '#303030';
        const labelColor = '#000000';
        const fontStyle = 'italic 28px Times New Roman';
        const subscriptFontStyle = 'italic 18px Times New Roman';

        // Clear canvas
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // 1. Draw the main circle
        ctx.beginPath();
        ctx.arc(cx, cy, R, 0, 2 * Math.PI);
        ctx.strokeStyle = circleColor;
        ctx.lineWidth = 2.5;
        ctx.stroke();

        // 2. Draw the center point O
        ctx.beginPath();
        ctx.arc(cx, cy, 4, 0, 2 * Math.PI);
        ctx.fillStyle = pointColor;
        ctx.fill();

        // 3. Draw the label 'O'
        ctx.fillStyle = labelColor;
        ctx.font = fontStyle;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText('O', cx - 25, cy + 5);

        // 4. Define point P0
        const p0x = cx + R;
        const p0y = cy;

        // 5. Draw the point P0
        ctx.beginPath();
        ctx.arc(p0x, p0y, 4, 0, 2 * Math.PI);
        ctx.fillStyle = pointColor;
        ctx.fill();
        
        // 6. Draw the label 'P0'
        ctx.font = fontStyle;
        ctx.fillText('P', p0x + 20, p0y + 4);
        ctx.font = subscriptFontStyle;
        ctx.fillText('0', p0x + 32, p0y + 10);

        // 7. Draw the dashed line from O to P0
        ctx.beginPath();
        ctx.setLineDash([6, 4]);
        ctx.moveTo(cx, cy);
        ctx.lineTo(p0x, p0y);
        ctx.strokeStyle = circleColor;
        ctx.lineWidth = 1.5;
        ctx.stroke();
        ctx.setLineDash([]); // Reset line dash

        // 8. Draw the velocity vector
        const vectorLength = 100;
        const vectorAngle = Math.PI - phi_rad;
        const vectorEndX = p0x + vectorLength * Math.cos(vectorAngle);
        const vectorEndY = p0y - vectorLength * Math.sin(vectorAngle);

        ctx.beginPath();
        ctx.moveTo(p0x, p0y);
        ctx.lineTo(vectorEndX, vectorEndY);
        ctx.strokeStyle = vectorColor;
        ctx.lineWidth = 3;
        ctx.stroke();

        // 9. Draw the arrowhead
        const headLength = 15;
        const angle = Math.atan2(vectorEndY - p0y, vectorEndX - p0x);
        ctx.beginPath();
        ctx.moveTo(vectorEndX, vectorEndY);
        ctx.lineTo(vectorEndX - headLength * Math.cos(angle - Math.PI / 7), vectorEndY - headLength * Math.sin(angle - Math.PI / 7));
        ctx.moveTo(vectorEndX, vectorEndY);
        ctx.lineTo(vectorEndX - headLength * Math.cos(angle + Math.PI / 7), vectorEndY - headLength * Math.sin(angle + Math.PI / 7));
        ctx.strokeStyle = vectorColor;
        ctx.lineWidth = 3;
        ctx.stroke();
        
        // 10. Draw the angle arc for phi
        const phiArcRadius = 50;
        ctx.beginPath();
        ctx.arc(p0x, p0y, phiArcRadius, -phi_rad, 0);
        ctx.strokeStyle = circleColor;
        ctx.lineWidth = 1.5;
        ctx.stroke();

        // 11. Draw the label 'φ'
        ctx.font = fontStyle;
        const phiLabelRadius = phiArcRadius * 0.55;
        const phiLabelAngle = -phi_rad / 2;
        const phiLabelX = p0x + phiLabelRadius * Math.cos(phiLabelAngle);
        const phiLabelY = p0y + phiLabelRadius * Math.sin(phiLabelAngle);
        ctx.fillText('φ', phiLabelX + 5, phiLabelY);

        // 12. Draw the second angle arc (between velocity vector and tangent)
        const tangentAngle = -Math.PI / 2; // Upward tangent at P0
        const secondArcRadius = 40;
        ctx.beginPath();
        // The angle of velocity vector is 'angle' or PI-phi_rad.
        // Canvas angles are clockwise from positive x-axis.
        // Tangent upwards is at -PI/2. Velocity is at PI - phi_rad.
        // We need to draw from tangent angle to vector angle.
        // For arc(), angles are CCW. So from angle(vector) to angle(tangent).
        ctx.arc(p0x, p0y, secondArcRadius, -Math.PI/2, Math.PI - phi_rad, true); // Use CCW for arc
        ctx.stroke();

    </script>
</body>
</html>